<template>
    <page-main>
        <el-tabs v-model="tabName" type="border-card" stretch @tab-click="handleClickTab">
            <el-tab-pane label="基础设置" name="1">
                <div style="display: flex;">
                    <div style="width: 45%;">
                        <h3>匹配模式设置(服务定价)</h3>
                        <ul class="service-price">
                            <li class="flc">
                                <span>图文咨询</span>
                                <el-input v-model="server_price[0].value.status0" style="width: auto; margin: 0 10px;" placeholder="请输入" />
                                <span>元/1小时</span>
                            </li>
                            <li class="flc">
                                <span>电话咨询</span>
                                <el-input v-model="server_price[0].value.status1" style="width: auto; margin: 0 10px;" placeholder="请输入" />
                                <span>元/30分钟</span>
                            </li>
                            <li class="flc">
                                <span>文书服务</span>
                                <el-input v-model="server_price[0].value.status2" style="width: auto; margin: 0 10px;" placeholder="请输入" />
                                <span>元/次</span>
                            </li>
                            <li class="flc">
                                <span>律师函</span>
                                <el-input v-model="server_price[0].value.status3" style="width: auto; margin: 0 10px;" placeholder="请输入" />
                                <span>元/次</span>
                            </li>
                            <li class="flc">
                                <span>案件委托</span>
                                <el-input v-model="server_price[0].value.status4" style="width: auto; margin: 0 10px;" placeholder="请输入" />
                                <span>元/次</span>
                            </li>
                            <li class="flc">
                                <span>企业服务</span>
                                <el-input v-model="server_price[0].value.status5" style="width: auto; margin: 0 10px;" placeholder="请输入" />
                                <span>元/次</span>
                            </li>
                        </ul>
                    </div>
                    <div style="width: 45%;">
                        <h3>系统时效设置</h3>
                        <ul class="service-price">
                            <li class="flc">
                                <span style="width: 170px;">定金有效期</span>
                                <el-input v-model="wxForm.appId" style="width: auto; margin: 0 10px;" disabled placeholder="请输入" />
                                <span>小时</span>
                            </li>
                            <li class="flc">
                                <span style="width: 170px;">下单未支付自动关单</span>
                                <el-input v-model="order_close_time" style="width: auto; margin: 0 10px;" placeholder="请输入" />
                                <span>分钟&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;服务单+vip单</span>
                            </li>
                            <li class="flc">
                                <span style="width: 170px;">x天后无人确认自动完成</span>
                                <el-input v-model="order_finish_time" style="width: auto; margin: 0 10px;" placeholder="请输入" />
                                <span>天</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div style="text-align: center; margin-top: 20px;">
                    <el-button type="primary" class="my-btn" @click="saveBase(server_price, order_close_time, order_finish_time)">保存设置</el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="支付配置" name="2">
                <div class="flc">
                    <h3 class="title">微信支付</h3>
                    <el-switch
                        v-model="isWxPay"
                        :active-value="1"
                        :inactive-value="0"
                        style="margin-top: 5px;"
                        active-color="#13ce66"
                    />
                </div>
                <div v-show="isWxPay">
                    <el-form ref="wxForm" :model="wxForm" :rules="rules" label-width="80px">
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="appId">
                                    <el-input v-model="wx_pay_config[0].value.app_id" disabled placeholder="请输入appId" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="秘钥">
                                    <el-input v-model="wx_pay_config[0].value.secret" disabled placeholder="请输入appId秘钥" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="商户号">
                                    <el-input v-model="wx_pay_config[0].value.mch_id" disabled placeholder="请输入商户号" />
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="秘钥">
                                    <el-input v-model="wx_pay_config[0].value.key" disabled placeholder="请输入商户号秘钥" />
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
                <div class="flc">
                    <h3 class="title">支付宝支付</h3>
                    <el-switch
                        v-model="isAliPay"
                        :active-value="1"
                        :inactive-value="0"
                        style="margin-top: 5px;"
                        active-color="#13ce66"
                        @change="aliPaySwitch"
                    />
                </div>
                <div class="flc">
                    <h3 class="title">余额支付</h3>
                    <el-switch
                        v-model="isBlPay"
                        :active-value="1"
                        :inactive-value="0"
                        style="margin-top: 5px;"
                        active-color="#13ce66"
                        @change="blPaySwitch"
                    />
                </div>
                <div class="flc">
                    <h3 class="title">一键登陆</h3>
                    <el-switch
                        v-model="token_login"
                        :active-value="1"
                        :inactive-value="0"
                        style="margin-top: 5px;"
                        active-color="#13ce66"
                    />
                </div>
                <div class="flc">
                    <h3 class="title">验证码登陆</h3>
                    <el-switch
                        v-model="code_login"
                        :active-value="1"
                        :inactive-value="0"
                        style="margin-top: 5px;"
                        active-color="#13ce66"
                    />
                </div>
                <div class="flc">
                    <h3 class="title">微信登陆</h3>
                    <el-switch
                        v-model="wx_login"
                        :active-value="1"
                        :inactive-value="0"
                        style="margin-top: 5px;"
                        active-color="#13ce66"
                        @change="wxPaySwitch"
                    />
                </div>
                <div style="text-align: center; margin-top: 20px;">
                    <el-button type="primary" class="my-btn" @click="savePay(isWxPay, isAliPay, isBlPay, wx_pay_config, token_login, code_login, wx_login)">保存设置</el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="会员等级" name="3">会员等级</el-tab-pane>
            <el-tab-pane label="营销配置" name="4">
                <div style="display: flex;">
                    <div style="width: 50%; position: relative;">
                        <h3>充值营销设定(仅支持3种额度设定)</h3>
                        <ul class="service-price">
                            <li class="flc" style="padding-top: 30px;">
                                <span>活动1</span>
                                <el-input v-model="top_up[0].value[0].key" style="width: auto; margin: 0 10px;" placeholder="请输入" />
                                <el-input v-model="top_up[0].value[0].value" style="width: auto; margin: 0 10px;" placeholder="请输入" />
                                <span style="position: absolute; top: 25%; left: 26%;">充值金额</span>
                                <span style="position: absolute; top: 25%; left: 64%;">获得金额</span>
                            </li>
                            <li class="flc">
                                <span>活动2</span>
                                <el-input v-model="top_up[0].value[1].key" style="width: auto; margin: 0 10px;" placeholder="请输入" />
                                <el-input v-model="top_up[0].value[1].value" style="width: auto; margin: 0 10px;" placeholder="请输入" />
                            </li>
                            <li class="flc">
                                <span>活动3</span>
                                <el-input v-model="top_up[0].value[2].key" style="width: auto; margin: 0 10px;" placeholder="请输入" />
                                <el-input v-model="top_up[0].value[2].value" style="width: auto; margin: 0 10px;" placeholder="请输入" />
                            </li>
                        </ul>
                    </div>
                    <div style="width: 50%;">
                        <h3>推广拉新</h3>
                        <ul class="service-price">
                            <li class="flc">
                                <span style="width: 170px;">拉新奖励余额</span>
                                <el-input v-model="recommend_balance[0].value" style="width: auto; margin: 0 10px;" placeholder="请输入" />
                            </li>
                            <li class="flc">
                                更改配置后，新产生的拉新以新数据执行
                            </li>
                        </ul>
                    </div>
                </div>
                <div style="text-align: center; margin-top: 20px;">
                    <el-button type="primary" class="my-btn" @click="saveTopUp(top_up, recommend_balance)">保存设置</el-button>
                </div>
            </el-tab-pane>
            <el-tab-pane label="推送配置" name="5">推送配置</el-tab-pane>
            <el-tab-pane label="版本配置" name="6">
                <div style="text-align: right;">
                    <el-button type="primary" class="my-btn" @click="submitNewVersion">提交新版本</el-button>
                </div>
                <div v-for="item in versionList" :key="item.id" style="display: flex; align-items: center;">
                    <div style="flex: 1;">
                        <h3 style="margin-right: auto;">
                            版本号
                            {{ item.version_number }}
                            <span v-if="item.type === 1">(安卓)</span>
                            <span v-else>(苹果)</span>
                        </h3>
                        <p>{{ item.content }}</p>
                    </div>
                    <div style="display: flex; margin-left: auto;">
                        <span style="color: #409eff; cursor: pointer; font-size: 14px; padding: 0 20px;" @click="handleClickEdit(item.id)">编辑</span>
                    </div>
                </div>
            </el-tab-pane>
        </el-tabs>
        <el-dialog :title="versionDialogTitle" :visible.sync="versionDialog" @close="closeVersion">
            <el-form ref="versionForm" :model="form" :rules="rules">
                <el-form-item label="版本号" label-width="80px" prop="version_number">
                    <el-input v-model="form.version_number" placeholder="请输入版本号" />
                </el-form-item>
                <el-form-item label="更新版本" label-width="80px" required>
                    <el-select v-model="form.type" clearable placeholder="请选择版本" style="width: 100%;">
                        <el-option label="安卓" :value="1" />
                        <el-option label="苹果" :value="2" />
                    </el-select>
                </el-form-item>
                <el-form-item label="版本链接" label-width="80px" prop="address">
                    <el-input v-model="form.address" placeholder="请输入链接" />
                </el-form-item>
                <el-form-item label="更新内容" label-width="80px" prop="content">
                    <el-input v-model="form.content" type="textarea" placeholder="请输入更新内容" />
                </el-form-item>
                <el-form-item style="text-align: right;">
                    <el-button @click="cancelNewVersion">取消</el-button>
                    <el-button type="primary" @click="onSubmit">提交</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
    </page-main>
</template>

<script>
import { getConfigList, editConfigList, getVersionList, versionAdd, findVersion, versionEdit } from '@/api/setting'
export default {
    name: 'Setting',
    data() {
        return {
            tabName: '1',
            isWxPay: 0,
            isAliPay: 0,
            isBlPay: 0,
            rules: {
                appId: [
                    { required: true, message: '请输入appId', trigger: 'blur' }
                ],
                version_number: [
                    { required: true, message: '请输入版本号', trigger: 'blur' }
                ],
                content: [
                    { required: true, message: '请输入更新内容', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请至少选择一个版本', trigger: 'change' }
                ],
                address: [
                    { required: true, message: '请输入版本链接', trigger: 'blur' }
                ]
            },
            baseForm: {
                appId: ''
            },
            server_price: [{value: {status0: '', status1: '', status2: '', status3: '', status4: '', status5: ''}}],
            order_close_time: '',
            order_finish_time: '',
            top_up: [{value: [{key: '', value: ''}, {key: '', value: ''}, {key: '', value: ''}]}],
            wx_pay: 0,
            ali_pay: 0,
            bl_pay: 0,
            wx_pay_config: [{value: {app_id: '', secret: '', mch_id: '', key: ''}}],
            token_login: 0,
            code_login: 0,
            wx_login: 0,
            version: {
                p: 1,
                length: 5,
                type: ''
            },
            versionList: [],
            form: {version_number: '', type: '', address: '', content: ''},
            versionDialog: false,
            versionDialogTitle: '新增版本',
            editId: '',
            recommend_balance: [{value: ''}],
            wxForm: {
                appId: ''
            }
        }
    },
    created() {
        this._getConfigList() // 获取配置
    },
    methods: {
        async _getConfigList() {
            this.$SpinkitLoading({type: 'chase', size: 50, color: '#ffffff'})
            const res = await getConfigList()
            console.log(res)
            let server_price = res.data.filter(item => item.name === 'server_price')
            server_price[0].value = JSON.parse(server_price[0].value)
            this.server_price = server_price
            let order_close_time =  res.data.filter(item => item.name === 'order_close_time')
            this.order_close_time = order_close_time[0].value
            let order_finish_time =  res.data.filter(item => item.name === 'order_finish_time')
            this.order_finish_time = order_finish_time[0].value
            let wx_pay =  res.data.filter(item => item.name === 'wx_pay')
            this.isWxPay = wx_pay[0].value - 0
            let ali_pay =  res.data.filter(item => item.name === 'ali_pay')
            this.isAliPay = ali_pay[0].value - 0
            let bl_pay =  res.data.filter(item => item.name === 'bl_pay')
            this.isBlPay = bl_pay[0].value - 0
            let token_login =  res.data.filter(item => item.name === 'token_login')
            this.token_login = token_login[0].value - 0
            let code_login =  res.data.filter(item => item.name === 'code_login')
            this.code_login = code_login[0].value - 0
            let wx_login =  res.data.filter(item => item.name === 'wx_login')
            this.wx_login = wx_login[0].value - 0
            let wx_pay_config = res.data.filter(item => item.name === 'wx_pay_config')
            wx_pay_config[0].value = JSON.parse(wx_pay_config[0].value)
            this.wx_pay_config = wx_pay_config
            let top_up = res.data.filter(item => item.name === 'top_up')
            top_up[0].value = JSON.parse(top_up[0].value)
            this.top_up = top_up
            let recommend_balance = res.data.filter(item => item.name === 'recommend_balance')
            recommend_balance[0].value = JSON.parse(recommend_balance[0].value)
            this.recommend_balance = recommend_balance
            console.log(recommend_balance)
            this.$SpinkitLoading.close()
        },
        // 支付配置 微信支付开关
        wxPaySwitch(e) {
            console.log(e)
            if (!e) this.$refs.wxForm.resetFields()
        },
        // 支付配置 支付宝支付开关
        aliPaySwitch(e) {
            console.log(e)
            // if (!e) this.$refs.wxForm.resetFields()
        },
        // 支付配置 余额支付开关
        blPaySwitch(e) {
            console.log(e)
        },
        // 营销配置的保存
        async saveTopUp(item, recommend_balance) {
            console.log(item)
            const res = await editConfigList({names: {top_up: item[0].value, recommend_balance: recommend_balance[0].value}})
            console.log(res)
            this.$message.success('修改成功')
            this._getConfigList() // 获取配置
            this.tabName = '4'
        },
        // 基础配置的保存
        async saveBase(server_price, order_close_time, order_finish_time) {
            console.log(server_price, order_close_time, order_finish_time)
            const res = await editConfigList({names: {server_price: server_price[0].value, order_close_time, order_finish_time}})
            console.log(res)
            this.$message.success('修改成功')
            this._getConfigList() // 获取配置
            this.tabName = '1'
        },
        // 支付配置的的保存
        async savePay(isWxPay, isAliPay, isBlPay, wx_pay_config, token_login, code_login, wx_login) {
            console.log(isWxPay, isAliPay, isBlPay, wx_pay_config, token_login, code_login, wx_login)
            let data = {
                names: {
                    wx_pay: isWxPay,
                    ali_pay: isAliPay,
                    bl_pay: isBlPay,
                    token_login,
                    code_login,
                    wx_login
                }
            }
            if (isWxPay === 1) {
                data.names.wx_pay_config = wx_pay_config[0].value
            }
            const res = await editConfigList(data)
            console.log(res)
            this.$message.success('修改成功')
            this._getConfigList() // 获取配置
            this.tabName = '2'
        },
        // 版本管理
        async handleClickTab(e) {
            if (e.name == 6 && this.versionList.length <= 0) {
                console.log(e)
                this.$SpinkitLoading({type: 'chase', size: 50, color: '#fff'})
                const res = await getVersionList(this.version)
                console.log(res)
                this.versionList = res.data.list
                this.$SpinkitLoading.close()
            }
        },
        // 新增版本、编辑版本
        submitNewVersion() {
            this.versionDialogTitle = '新增版本'
            for (let key in this.form) {
                this.form[key] = ''
                console.log(this.form)
            }
            this.versionDialog = true
        },
        cancelNewVersion() {
            this.versionDialog = false
            this.closeVersion()
        },
        onSubmit() {
            if (this.versionDialogTitle === '新增版本') {
                this.$refs.versionForm.validate(async valid => {
                    if (valid) {
                        if (!this.form.type) return this.$message.warning('请选择更新版本类型')
                        console.log(this.form)
                        const res = await versionAdd(this.form)
                        console.log(res)
                        this.$message.success('提交成功')
                        this.cancelNewVersion()
                    } else {
                        return false
                    }
                })
            } else {
                this.$refs.versionForm.validate(async valid => {
                    if (valid) {
                        if (!this.form.type) return this.$message.warning('请选择更新版本类型')
                        console.log(this.form)
                        let data = {...this.form, id: this.editId}
                        console.log(data)
                        const res = await versionEdit(data)
                        console.log(res)
                        this.$message.success('提交成功')
                        this.cancelNewVersion()
                    } else {
                        return false
                    }
                })
            }
        },
        async handleClickEdit(id) {
            this.editId = id
            this.versionDialogTitle = '编辑版本'
            this.$SpinkitLoading({type: 'chase', size: 50, color: '#fff'})
            const res = await findVersion({id})
            console.log(res)
            this.form.version_number = res.data.list.version_number
            this.form.type = res.data.list.type
            this.form.content = res.data.list.content
            this.form.address = res.data.list.address
            this.versionDialog = true
            this.$SpinkitLoading.close()
        },
        closeVersion() {
            this.$refs.versionForm.resetFields()
        }
    }
}
</script>

<style scoped lang="scss">
    .title {
        margin-right: 10px;
        width: 100px;
    }
    .service-price {
        li {
            margin-top: 10px;
            span {
                display: inline-block;
                width: 80px;
            }
        }
    }
</style>
